<template>
    <div class="sea-page-column">
        <div class="box flex-column-gap">
            <blockquote>
                <h5>基础配色方案</h5>
            </blockquote>

            <sea-grid col="5">
                <div class="box bg-info">
                    <p>bg-info</p>
                </div>
                <div class="box bg-primary">
                    <p>bg-primary</p>
                </div>
                <div class="box bg-success">
                    <p>bg-success</p>
                </div>
                <div class="box bg-warning">
                    <p>bg-warning</p>
                </div>
                <div class="box bg-danger">
                    <p>bg-danger</p>
                </div>
            </sea-grid>

            <sea-grid col="5">
                <div class="box fill-info">
                    <p class="text-info">fill-info</p>
                </div>
                <div class="box fill-primary">
                    <p class="text-primary">fill-primary</p>
                </div>
                <div class="box fill-success">
                    <p class="text-success">fill-success</p>
                </div>
                <div class="box fill-warning">
                    <p class="text-warning">fill-warning</p>
                </div>
                <div class="box fill-danger">
                    <p class="text-danger">fill-danger</p>
                </div>
            </sea-grid>

            <sea-grid col="5">
                <div class="box fill-darker">
                    <p class="text-regular">fill-darker</p>
                </div>
                <div class="box fill-dark">
                    <p class="text-regular">fill-dark</p>
                </div>
                <div class="box fill-default">
                    <p class="text-regular">fill-default</p>
                </div>
                <div class="box fill-light">
                    <p class="text-regular">fill-light</p>
                </div>
                <div class="box fill-lighter">
                    <p class="text-regular">fill-lighter</p>
                </div>
            </sea-grid>

            <sea-grid col="5">
                <div class="box fill-default">
                    <p class="text-fatal">
                        <del>text-fatal</del>
                    </p>
                </div>
                <div class="box fill-default">
                    <p class="text-regular">text-regular</p>
                </div>
                <div class="box fill-default">
                    <p class="text-secondary">text-secondary</p>
                </div>
                <div class="box fill-default">
                    <p class="text-placeholder">text-placeholder</p>
                </div>
                <div class="box fill-default">
                    <p class="text-disabled">text-disabled</p>
                </div>
            </sea-grid>


            <sea-grid col="5">
                <div class="box bg-info">
                    <span class="text-block active">active</span>
                    <span class="text-block">bg-info</span>
                </div>
                <div class="box bg-primary">
                    <span class="text-block active">active</span>
                    <span class="text-block">bg-primary</span>
                </div>
                <div class="box bg-success">
                    <span class="text-block active">active</span>
                    <span class="text-block">bg-success</span>
                </div>
                <div class="box bg-warning">
                    <span class="text-block active">active</span>
                    <span class="text-block">bg-warning</span>
                </div>
                <div class="box bg-danger">
                    <span class="text-block active">active</span>
                    <span class="text-block">bg-danger</span>
                </div>
            </sea-grid>

            <sea-grid col="5">
                <div class="box fill-info">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-info</span>
                </div>
                <div class="box fill-primary">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-primary</span>
                </div>
                <div class="box fill-success">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-success</span>
                </div>
                <div class="box fill-warning">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-warning</span>
                </div>
                <div class="box fill-danger">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-danger</span>
                </div>
            </sea-grid>


            <sea-grid col="5">
                <div class="box fill-darker">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-darker</span>
                </div>
                <div class="box fill-dark">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-dark</span>
                </div>
                <div class="box fill-default">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-default</span>
                </div>
                <div class="box fill-light">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-light</span>
                </div>
                <div class="box fill-lighter">
                    <span class="text-block active">active</span>
                    <span class="text-block">fill-lighter</span>
                </div>
            </sea-grid>
        </div>

        <div class="box flex-column-gap">
            <blockquote>
                <h5>扩展配色方案</h5>
                <div>就是 css 样式里，用颜色名称就能使用的那些颜色</div>
                <div>这些颜色特点就是比较鲜艳，在各种场景都能有良好表现</div>
            </blockquote>


            <sea-grid col="6">
                <div class="small-card">
                    <strong class="text-center">Purple</strong>

                    <div class="color-palette-set">
                        <div class="bg-purple disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-purple color-palette"><span>#605ca8</span></div>
                        <div class="bg-dark-purple color-palette"><span>Active</span></div>
                    </div>
                </div>
                <div class="small-card">
                    <strong class="text-center">Blue（蓝色）</strong>

                    <div class="color-palette-set">
                        <div class="bg-blue disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-blue color-palette"><span>#0073b7</span></div>
                        <div class="bg-dark-blue color-palette"><span>Active</span></div>
                    </div>
                </div>
                <div class="small-card">
                    <strong class="text-center">Olive</strong>

                    <div class="color-palette-set">
                        <div class="bg-olive disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-olive color-palette"><span>#3d9970</span></div>
                        <div class="bg-dark-olive color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Green</strong>

                    <div class="color-palette-set">
                        <div class="bg-green disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-green color-palette"><span>#00a65a</span></div>
                        <div class="bg-dark-green color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Yellow</strong>

                    <div class="color-palette-set">
                        <div class="bg-yellow disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-yellow color-palette"><span>#f39c12</span></div>
                        <div class="bg-dark-yellow color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Orange</strong>

                    <div class="color-palette-set">
                        <div class="bg-orange disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-orange color-palette"><span>#ff851b</span></div>
                        <div class="bg-dark-orange color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Red</strong>

                    <div class="color-palette-set">
                        <div class="bg-red disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-red color-palette"><span>#dd4b39</span></div>
                        <div class="bg-dark-red color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Maroon（栗色）</strong>

                    <div class="color-palette-set">
                        <div class="bg-maroon disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-maroon color-palette"><span>#d81b60</span></div>
                        <div class="bg-dark-maroon color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Fuchsia（品红色）</strong>

                    <div class="color-palette-set">
                        <div class="bg-fuchsia disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-fuchsia color-palette"><span>#f012be</span></div>
                        <div class="bg-dark-fuchsia color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Aqua（水蓝色）</strong>

                    <div class="color-palette-set">
                        <div class="bg-aqua disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-aqua color-palette"><span>#00c0ef</span></div>
                        <div class="bg-dark-aqua color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Teal</strong>

                    <div class="color-palette-set">
                        <div class="bg-teal disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-teal color-palette"><span>#39cccc</span></div>
                        <div class="bg-dark-teal color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Lime(酸橙色)</strong>

                    <div class="color-palette-set">
                        <div class="bg-lime disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-lime color-palette"><span>#01ff70</span></div>
                        <div class="bg-dark-lime color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <strong class="text-center">Navy</strong>

                    <div class="color-palette-set">
                        <div class="bg-navy disabled color-palette"><span>Disabled</span></div>
                        <div class="bg-navy color-palette"><span>#001F3F</span></div>
                        <div class="bg-dark-navy color-palette"><span>Active</span></div>
                    </div>
                </div>

                <div class="small-card">
                    <div class="col-sm-4 col-md-2">
                        <strong class="text-center">Gray</strong>

                        <div class="color-palette-set">
                            <div class="bg-gray disabled color-palette"><span>Disabled</span></div>
                            <div class="bg-gray color-palette"><span>#001f3f</span></div>
                            <div class="bg-dark-gray color-palette"><span>Active</span></div>
                        </div>
                    </div>
                </div>
                <!-- /.col -->
                <div class="small-card">
                    <strong class="text-center">Black</strong>

                    <div class="color-palette-set">
                        <div class="bg-black disabled color-palette"><span>Disabled</span></div>
                        <div class="color-palette" style="background-color: #111111"><span>#111111</span></div>
                        <div class="bg-black color-palette"><span>Active</span></div>
                    </div>
                </div>
                <!-- /.col -->
            </sea-grid>

        </div>


        <div class="box flex-column-gap">
            <blockquote>
                <h5>基础色</h5>
                <div>根据基础配色方案实现的盒模型</div>
                <div>如果没什么极端需求，其实已经很够用了</div>
            </blockquote>
            <sea-grid class="demo-grid">
                <div class="small-card align-center">
                    <i class="fa fa-fw fa-camera"></i>
                    <div>设备1</div>
                </div>
                <div class="small-card active align-center">
                    <i class="fa fa-fw fa-camera"></i>
                    <div>设备2</div>
                </div>
                <div class="small-card box-info align-center">
                    <i class="fa fa-fw fa-camera"></i>
                    <div>设备3</div>
                </div>
                <div class="small-card box-primary align-center">
                    <i class="fa fa-fw fa-camera"></i>
                    <div>设备4</div>
                </div>
                <div class="small-card box-success align-center">
                    <i class="fa fa-fw fa-viadeo"></i>
                    <div>设备5</div>
                </div>
                <div class="small-card box-warning align-center">
                    <i class="fa fa-fw fa-unlink"></i>
                    <div>设备6</div>
                </div>
                <div class="small-card box-danger align-center">
                    <i class="fa fa-fw fa-camera"></i>
                    <div>设备7</div>
                </div>
            </sea-grid>
        </div>


        <div class="box flex-column-gap">
            <blockquote>
                <h5>扩展色</h5>
                <div>primary/success/warning/danger 对应的填充色</div>
                <div>原本设计，希望每一种色彩都有对应的 disabled/active 配色</div>
                <div>但是发现配色过于复杂，使用场景又相对较少，因此最终放弃</div>
            </blockquote>

            <sea-grid class="demo-grid" col="6">
                <div class="small-card align-center" style="background-color: rgb(255, 250, 250)">1</div>
                <div class="small-card align-center" style="background-color: rgb(254, 247, 247)">1</div>
                <div class="small-card align-center" style="background-color: rgb(253, 243, 243)">1</div>
                <div class="small-card align-center" style="background-color: rgb(252, 240, 240)">1</div>
                <div class="small-card align-center" style="background-color: rgb(251, 233, 233)">2</div>
                <div class="small-card align-center" style="background-color: rgb(250, 225, 225)">3</div>
            </sea-grid>

            <sea-grid class="demo-grid" col="6">
                <div class="small-card align-center" style="background-color: rgb(255, 250, 240)">1</div>
                <div class="small-card align-center" style="background-color: rgb(254, 248, 238)">1</div>
                <div class="small-card align-center" style="background-color: rgb(253, 246, 236)">1</div>
                <div class="small-card align-center" style="background-color: rgb(252, 245, 235)">1</div>
                <div class="small-card align-center" style="background-color: rgb(251, 241, 225)">2</div>
                <div class="small-card align-center" style="background-color: rgb(250, 236, 216)">3</div>
            </sea-grid>

            <sea-grid class="demo-grid" col="6">
                <div class="small-card align-center" style="background-color: rgb(245, 250, 245)">1</div>
                <div class="small-card align-center" style="background-color: rgb(239, 248, 235)">1</div>
                <div class="small-card align-center" style="background-color: rgb(232, 245, 225)">1</div>
                <div class="small-card align-center" style="background-color: rgb(224, 242, 215)">1</div>
                <div class="small-card align-center" style="background-color: rgb(217, 239, 205)">2</div>
                <div class="small-card align-center" style="background-color: rgb(209, 236, 195)">3</div>
            </sea-grid>

            <sea-grid class="demo-grid" col="6">
                <div class="small-card align-center" style="background-color: rgb(248,252,255)">1</div>
                <div class="small-card align-center" style="background-color: rgb(244, 249, 255)">1</div>
                <div class="small-card align-center" style="background-color: rgb(240, 247, 255)">1</div>
                <div class="small-card align-center" style="background-color: rgb(235, 245, 255)">1</div>
                <div class="small-card align-center" style="background-color: rgb(226, 240, 255)">2</div>
                <div class="small-card align-center" style="background-color: rgb(216, 235, 255)">3</div>
            </sea-grid>
        </div>

    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>

.color-palette {
    height: 35px;
    line-height: 35px;
    text-align: center;
}

.color-palette span {
    color: #FFF;
    display: none;
    font-size: 12px;
}

.color-palette:hover span {
    display: block;
}
</style>